<!-- 会员列表> 基本负责人新增 -->
<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="姓名">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '请输入姓名' }] }]"
          placeholder="请输入姓名"
          :disabled="type === 'detail'"
        />
        <a-input hidden v-decorator="['id']"></a-input>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="管理权限">
        <a-radio-group
          v-model="roleValue"
          @change="onChange"
          v-decorator="['memberRoleType', { initialValue: 3 }]"
          :disabled="type === 'detail'"
        >
          <a-radio :value="1"> 负责人 </a-radio>
          <template v-if="memberRoleType != 1">
            <a-radio :value="2"> 管理员</a-radio>
            <a-radio :value="3"> 普通成员 </a-radio>
          </template>
        </a-radio-group>
        <div>{{ roleTipMap[roleValue] }}</div>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号码">
        <a-input
          placeholder="请输入"
          v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号码' }] }]"
          :disabled="type === 'detail'"
        />
      </a-form-item>

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单位职务">
        <a-input placeholder="请输入" v-decorator="['socialPosition']" :disabled="type === 'detail'" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="个人照片">
        <UploadImg v-model="imageUrl" :width="120" :height="168" cropper :cropperEnlarge="3">
          <template #tips>
            一寸照
          </template>
        </UploadImg>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import UploadImg from '@/components/UpFile/uploadImg'
import { leadingMemberAdd, leadingMemberUpdate, leadingMemberDetail } from '@/api/system/system'
import { getPosition } from '@/api/member/memberConfig'
import pick from 'lodash.pick'

export default {
  components: {
    UploadImg,
  },
  data() {
    return {
      roleValue: 3,
      memberRoleType: 3,
      showRole: false,
      visible: false,
      videoLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      imageUrl: '',
      title: '',
      type: '',
      leaderId: '',
      form: this.$form.createForm(this),
      titleOption: [],
      showRoles: '',
      roleTipMap: {
        1: '温馨提示：负责人限设1人，操作权限（单位主页、单位成员、入会资料、代报名）',
        2: '温馨提示：管理员限设5人，操作权限（单位主页、单位成员、入会资料、代报名）',
        3: '温馨提示：普通成员限设100人，查看权限（单位主页、单位成员、入会资料）',
      },
    }
  },
  methods: {
    // 单选
    onChange(e) {
      if (e.target.value === 1) {
        this.showRole = true
      } else if (e.target.value === 2) {
        this.showRole = false
        this.showRoles = 2
      } else {
        this.showRole = false
        this.showRoles = 0
      }
    },
    handleCancel() {
      this.showRole = false
      this.initRole = ''
      this.memberRoleType = ''
      this.$nextTick(() => {
        this.form.resetFields()
      })
    },
    add(obj) {
      this.title = obj.title
      this.type = obj.type
      this.imageUrl = ''
      this.memberRoleType = ''
      this.initRole = ''
      this.visible = true
      this.$nextTick(() => {
        this.roleValue = 3
        this.form.resetFields()
      })
    },
    edit(obj) {
      // 详情
      this.title = obj.title
      this.type = obj.type
      this.title = obj.title
      this.email = obj.email
      this.imageUrl = ''
      this.visible = true
      this.form.resetFields()
      this.$nextTick(() => {
        this.imageUrl = obj.data.avatar
        this.roleValue = obj.data.memberRoleType
        this.memberRoleType = obj.data.memberRoleType
        this.form.setFieldsValue(
          pick(
            obj.data,
            'id',
            'title',
            'name',
            'sort',
            'politicalStatus',
            'politicalTitle',
            'socialPosition',
            'sex',
            'memberRoleType',
            // "initRole",
            'title',
            'phone',
            'socialPosition'
          )
        )
      })
      leadingMemberDetail({ id: obj.data.id }).then((res) => {
        this.showRoles = res.data.memberRoleType
        this.$nextTick(() => {
          if (res.data.cardStyle) {
            res.data.cardStyle = Number(res.data.cardStyle)
          }
          if (res.data.socialMission) {
            res.data.socialMission = String(res.data.socialMission)
          }
          if (res.data.socialIdentityList) {
            res.data.val1 = res.data.socialIdentityList[0]
            res.data.val2 = res.data.socialIdentityList[1]
          }
          this.remarks = res.data.remarks
          this.form.setFieldsValue(
            pick(
              res.data,
              'id',
              'briefIntroduction',
              'remarks',
              'email',
              'birthday',
              'title',
              'initRole',
              'cardStyle',
              'socialMission'
            )
          )
        })
      })
    },

    // 获取职务
    handletitleData() {
      getPosition({ cocId: this.$route.query.id }).then((res) => {
        this.titleOption = res.data
      })
    },

    handleSubmit(e) {
      e.preventDefault()
      if (this.type === 'detail') return (this.visible = false)
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = JSON.parse(JSON.stringify(values))
          params.avatar = this.imageUrl
          params.cocId = this.$route.query.id
          // params.socialIdentityList = [params.val1, params.val2];
          if (values.politicalTitle) {
            params.politicalTitle = values.politicalTitle.join(',')
          }
          this.confirmLoading = true
          if (this.type === 'add') {
            return leadingMemberAdd(params)
              .then((res) => {
                if (res.code !== 20001) {
                  this.$message.success('新增成功')
                  this.visible = false
                  this.$emit('add')
                }
              }).finally(() => {
                this.confirmLoading = false
              })
          } else {
            return leadingMemberUpdate(params)
              .then((res) => {
                if (res.code !== 20001) {
                  this.$message.success('编辑成功')
                  this.visible = false
                  this.$emit('upd')
                }
              }).finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
  },
}
</script>
<style scoped>
</style>
